<template>
	<view class="home-box">
		<!-- <image class="child-img" src="../../static/imgPc/主页背景@2x.png" @click="gohome"></image> -->
		<view class="title" @click="gohome">{{title}}</view>
		<view class="content-box" v-show="!infoShow">
			<!-- 按钮 -->
			<view>
				<el-row :gutter="20">
					<el-col :span="4" :offset="item.offset" v-for="item in buttonList">
						<view class="image-container">
							<img :src="item.img" alt="Description of image" class="button">
							<view class="centered-text" @click="handleClick(item)">{{item.name}}</view>
						</view>
					</el-col>
				</el-row>
			</view>
			<!-- 设备管理 -->
			<view v-show='showPage === "MainPage"'>
				<!-- 看板 -->
				<view class="map-box">
					<el-row :gutter="20">
						<!-- product -->
						<el-col :span="15" :lg="15" :md="24">
							<view class="product-box">
								<view class="product-box-inner">
									<view style="position: relative; top: 5%; padding: 10rpx 60rpx;">
										<el-row>
											<el-col :span="6" v-for="item in productStateList">
												<view class="image-container">
													<img :src="item.img" alt="Description of image" style="height: 120rpx;" mode="hightFix">
													<view class="product-state">{{item.name}}:{{item.value}}</view>
												</view>
											</el-col>
										</el-row>
									</view>
									<view style="position: relative; padding: 25px 30px;">
										<el-row  type="flex" style="flex-wrap:wrap">
											<el-col :span="8" v-for="item in deviceList">
												<view class="image-container" @click="deviceclick(item)">
													<el-row>
														<el-col :span="10">
															<img :src="item.img" alt="Description of image" style="width: 100%; height: auto;" mode="aspectFill">
														</el-col>
														<el-col :span="14">
															<view class="device-info">
																<view style="margin: 0 0 10px 0;">
																	<view class="def-text-2">设备: {{item.name}}</view>
																	<view class="def-text-2">车间: {{item.workshopid}}</view>
																</view>
																<view style="">
																	<view class="def-text-2">状态: {{item.status}}</view>
																	<view class="def-text-2">当日稼动率: {{item.ultilityrate}}</view>
																</view>
															</view>
									
														</el-col>
													</el-row>
									
									
												</view>
											</el-col>
										</el-row>
									</view>
								</view>
							</view>
						</el-col>
						<!-- chart -->

						<el-col :span="9" :lg="9" :md="24">
							<view style="position: relative;">
								<view class="table-label" style="position: absolute;top:25px;left: 40%;">设备平均稼动率</view>
								<view class="chart-map">
									<view class="charts-box">
										<qiun-data-charts type="area" :opts="opts2" :chartData="chartData2" />
									</view>
								</view>
							</view>
						</el-col>

					</el-row>
				</view>
				<!-- table -->
				<view style="padding: 5px 30px 10px 30px;">
					<view class="table-box">
						<view class="table-label">质量报告</view>
						<view style="position: relative; top: 10%;">
							<el-form inline :model="formInline" style="padding: 0 2%;" label-width="80px">
								<view style="display: flex;">
									<view style="text-align: left; position: relative; width: 90%;">
										<!-- <el-row>
											<el-col :span="12"> -->
										<el-form-item label="工件ID">
											<el-input v-model="formInline.partid" size="mini"></el-input>
										</el-form-item>
										<!-- </el-col>
											<el-col :span="12"> -->
										<el-form-item label="工件类型">
											<el-input v-model="formInline.parttypeid" size="mini"></el-input>
										</el-form-item>
										<!-- 	</el-col>
										</el-row> -->
									</view>
									<view style="text-align: right; position: relative; width: 50%;">
										<el-form-item>
											<el-date-picker type="date" placeholder="选择日期" v-model="formInline.date" style="width: 100%;" size="mini"></el-date-picker>
										</el-form-item>
										<el-form-item>
											<view class="image-container" @click="search">
												<img src="../../static/imgPc/../../static/imgPc/搜索按钮 背景@2x.png" alt="Description of image" class="button" style="height: 28px; width: 90px;">
												<view class="centered-text">搜索
													<!-- <image src="../../static/imgPc/搜索 图标@2x.png" style="background-size: 100% 100%; height: 20px; width: 20px;">
													  <view>搜索</view>
												  </image> -->
												</view>
											</view>
										</el-form-item>
									</view>
								</view>
							</el-form>
							<view style="padding: 0px 20px;">
								<el-table :data="tableData" style="width: 100%" class="custom-table" height="250" @row-click="handleRowClick">
									<el-table-column property="WorkpieceID" label="工件ID" align="center"></el-table-column>
									<el-table-column property="WorkpieceTypeID" label="工件类型ID" align="center"></el-table-column>
									<el-table-column property="DeviceName" label="设备" align="center"></el-table-column>
									<el-table-column property="DeviceIP" label="设备IP" align="center"></el-table-column>
									<el-table-column label="测量结果" align="center">
										<template slot-scope="scope">
											<span style="color: #3FE5E8;">{{ scope.row.MeasureResult }}</span>
										</template>
									</el-table-column>
									<el-table-column property="MeasureTime" label="时间" align="center"></el-table-column>
									<el-table-column property="Remark" label="说明" align="center"></el-table-column>
								</el-table>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show='showPage === "车间管理"'>
				<workshop-vue ref="workshopVue" @showInfo="showMain"></workshop-vue>
			</view>
			<view v-show='showPage === "用户管理"'>
				<user-vue ref="userVue" @showInfo="showMain"></user-vue>
			</view>
			<view v-show='showPage === "修改密码"'>
				<password-vue @showInfo="showMain"></password-vue>
			</view>

			<view v-show='showPage === "设备管理"'>
				<device-vue ref="deviceVue" @showInfo="showMain"></device-vue>
			</view>


			<view v-show='showPage === "设备稼动率"'>
				<deviceultility-vue ref="deviceultilityVue" @showInfo="showMain"></deviceultility-vue>
			</view>


		</view>
		<view v-show="infoShow" style="display: flex;justify-content: center;">
			<view style="background: url('./../static/imgPc/测量结果详情页 背景@1x.png');
			background-size: 100% 100%;
			width: 80vw;
			height: 80vh;
			margin-top: 12vh;
			overflow-y: auto;">
				<view style="display: flex;justify-content: start;">
					<view class="add-btn" @click="infoShow = false">
						<span class="btn-text">返回</span>
					</view>
				</view>
				<view style="display: flex;justify-content: center;margin-top: 2vh;margin-bottom: 2vh;padding-left: 2vh;padding-right: 2vh;">
					<view style="background:rgba(13,46,105, 0.41);border-radius: 8px;width: 100%;height: 4.4vh">
						<view style="opacity: 1;display: flex;justify-content: space-around;align-items: center;height: 100%;">
							<span class="def-text">尺寸id</span>
							<span class="def-text" style="width: 200%;">尺寸项</span>
							<span class="def-text">标准值</span>
							<span class="def-text">上公差</span>
							<span class="def-text">下公差</span>
							<span class="def-text">测量值</span>
							<span class="def-text">偏差值</span>
							<span class="def-text">超差值</span>
							<span class="def-text">结果</span>
						</view>
					</view>

				</view>
				<view v-for="(item,index) in dataList" style="display: flex;justify-content: center;margin-top: 1vh;padding-left: 2vh;padding-right: 2vh;">
					<view style="background-image: linear-gradient(90deg, rgba(186,232,255,0.05) 1%, rgba(186,232,255,0.01) 46%, rgba(186,232,255,0.05) 100%);border-radius: 8px;width: 100%;height: 4.4vh">
						<view style="opacity: 1;display: flex;justify-content: space-around;align-items: center;height: 100%;">
							<span class="def-text">{{ item.DimensionID }}</span>
							<span class="def-text" style="width: 200%;">{{ item.DimensionName }}</span>
							<span class="def-text">{{ item.NormalVal }}</span>
							<span class="def-text">{{ item.UpperTolVal }}</span>
							<span class="def-text">{{ item.LowerTolVal }}</span>
							<span class="def-text">{{ item.MeasureValue }}</span>
							<span class="def-text">{{ item.Deviation }}</span>
							<span class="def-text">{{ item.DataOutTolVal }}</span>
							<span class="def-text">{{ item.MeasureResult }}</span>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import workshopVue from './workshop.vue'
	import userVue from './user.vue'
	import passwordVue from './password.vue'
	import deviceVue from './tdevice.vue'
	import deviceultilityVue from './deviceultility.vue'

	import {
		getAllRoles
	} from '@/api/user.js'
	import qiunDataCharts from '@/uni_modules/qiun-data-charts/components/qiun-data-charts/qiun-data-charts.vue'
	import {
		getAllDevices,
		CurrentStatusStatistic,
		SevenDaysUtility,
		MeasureResult,
		MeasureResultDetail,
		SearchReport
	} from '../../api/device'
	import config from '@/config.js'
	export default {
		components: {
			workshopVue,
			userVue,
			passwordVue,
			deviceVue,
			deviceultilityVue
		},
		mixins: [qiunDataCharts],
		data() {
			return {
				dataList: [],
				infoShow: false,
				showPage: 'MainPage',
				title: '雷沃智慧管理平台',
				buttonList: [{
						img: '../../static/imgPc/顶部4个按钮-未选中@2x.png',
						name: '设备管理',
						offset: 0
					},
					{
						img: '../../static/imgPc/顶部4个按钮-未选中@2x.png',
						name: '车间管理',
						offset: 0
					},
					{
						img: '../../static/imgPc/顶部4个按钮-未选中@2x.png',
						name: '用户管理',
						offset: 8
					},
					{
						img: '../../static/imgPc/顶部4个按钮-未选中@2x.png',
						name: '修改密码',
						offset: 0
					}
				],
				formInline: {
					parttypeid: "",
					partid: "",
					date: ""
				},
				productStateList: [{
						img: '../../static/imgPc/空闲 台数@2x.png',
						name: '空闲',
						value: 0
					},
					{
						img: '../../static/imgPc/忙碌 台数@2x.png',
						name: '忙碌',
						value: 0
					},
					{
						img: '../../static/imgPc/报警 台数@2x.png',
						name: '报警',
						value: 0
					},
					{
						img: '../../static/imgPc/关机 台数@2x.png',
						name: '关机',
						value: 0
					},
				],
				idlecount: 0,
				busycount: 0,
				alertcount: 0,
				poweroffcount: 0,
				deviceList: [{
						img: '../../static/imgPc/空闲 头像@2x.png',
						name: '空闲'
					},
					{
						img: '../../static/imgPc/报警 头像@2x.png',
						name: '空闲'
					},
					{
						img: '../../static/imgPc/忙碌 头像@2x.png',
						name: '空闲'
					},
					{
						img: '../../static/imgPc/关机 头像@2x.png',
						name: '空闲'
					},
					{
						img: '../../static/imgPc/忙碌 头像@2x.png',
						name: '空闲'
					},
					{
						img: '../../static/imgPc/空闲 头像@2x.png',
						name: '空闲'
					}
				],
				tableData: [

				],
				chartData2: {},
				//您可以通过修改 config-ucharts.js 文件中下标为 ['area'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
				opts2: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [45, 25, 50, 10],
					enableScroll: false,
					legend: {
						show: true,
						fontColor: "#ffffff"
					},

					xAxis: {
						disableGrid: true,
						fontColor: "#ffffff",
					},
					yAxis: {
						gridType: "solid",
						gridColor: "#1f2d3c",
						data: [{
							min: 0,
							max: 150,
							fontColor: "#ffffff",

						}]
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2,
							gradient: true,
							activeType: "hollow",

						}
					},
				}
			}
		},
		onLoad() {
			if (config.userid === "") {
				uni.navigateTo({
					url: '/pages/login/login',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			} else {
				//console.log("ZZZZZZZZZZZZZZZZZZZZZZZZZZZZ:",config.userid,config.workshopid)
				this.getData()
				this.startInterval()
			}
		},
		onReady() {
			this.getServerData();
		},
		methods: {
			deviceclick(item) {

				this.showPage = "设备稼动率"
				this.$refs.deviceultilityVue.getdeviceultility(item.name)
			},
			showMain() {
				console.log('showMain')
				this.infoShow = false
				this.showPage = "MainPage"
			},
			async updateData() {
				let that = this;
				await CurrentStatusStatistic({
						data: {
							workshopid: config.workshopid
						}
					}).then(res => {

						if (res.data.statuscode == 1) {

							let StatusCollection = res.data.data
								.StatusCollection; //{"0": 0, "1": 0, "2": 0, "3": 1}
							for (let key in StatusCollection) {
								if (key == "0") {
									that.productStateList[3].value = StatusCollection[key]

								} else if (key == "1") {
									that.productStateList[0].value = StatusCollection[key]
								} else if (key == "2") {
									that.productStateList[1].value = StatusCollection[key]
								} else if (key == "3") {
									that.productStateList[2].value = StatusCollection[key]
								}
							}



							//[{"DeviceName": "设备1", "WorkshopName": "车间1", "UtilizationRate": "60", "DeviceIP": "1", "Status": "报警", "image": "设备102.png", "imagepath": "images/设备102.png"}]
							let UtilityRate = res.data.data.UtilityRate;
							UtilityRate.forEach((item, index) => {

								let targetindex = -1;
								for (let i = 0; i < that.deviceList.length; i++) {
									if (that.deviceList[i].name === item.DeviceName) {
										targetindex = i;
										break;
									}
								}
								if (targetindex >= 0) {
									that.deviceList[targetindex]["status"] = item.Status
									that.deviceList[targetindex]["ultilityrate"] = item.UtilizationRate
								}

							});

						} else {
							console.log("failed to get status");
						}


					}),
					await SevenDaysUtility({
						data: {
							workshopid: config.workshopid
						}
					}).then(res => {

						if (res.data.statuscode == 1) {
							let tempchartData2 = {
								categories: ["2018", "2019", "2020", "2021", "2022", "2023", "2024"],
								series: [{
										name: "稼动率",
										data: [0, 19, 0, 0, 0, 0, 0],
										textColor: "#ffffff"
									},

								]
							};

							let sevendays = res.data.data
							let i1 = 0;
							sevendays.forEach((item, index) => {
									tempchartData2.categories[i1] = item["CREATETIME"]
									tempchartData2.series[0].data[i1] = item["UtilizationRate"]
									i1 += 1;
								}

							)
							that.chartData2 = tempchartData2
						} else {
							console.log("failed to get SevenDaysUtility");
						}
					})
			},
			startInterval() {
				// 使用 setInterval 每秒执行一次 increment 函数  
				this.intervalId = setInterval(() => {
					this.updateData();
				}, 10000);
			},
			getServerData() {
				//模拟从服务器获取数据时的延时
				setTimeout(() => {
					let res2 = {
						categories: ["2018", "2019", "2020", "2021", "2022", "2023", "2024"],
						series: [{
								name: "稼动率",
								data: [0, 1, 0, 0, 0, 0, 0],
								textColor: "#ffffff"
							},

						]
					};
					this.chartData2 = res2;
				}, 500);
			},
			handleClick(item) {
				if (config.rolename === "普通用户" && (item.name == '设备管理' || item.name == '用户管理' || item.name == '车间管理')) {
					return
				}

				this.showPage = item.name
				console.log("……………………………………………………………………", this.showPage)
				if (this.showPage === '用户管理') {
					this.$refs.userVue.getAllUsers()
				}
				if (this.showPage === '车间管理') {
					this.$refs.workshopVue.getAllWorkshops()
				}
				if (this.showPage === '设备管理') {
					this.$refs.deviceVue.AllDevices()
				}
				item.img = '../../static/imgPc/顶部4个按钮-选中@2x.png'
				this.buttonList.forEach(ele => {
					if (item.name !== ele.name) {
						ele.img = '../../static/imgPc/顶部4个按钮-未选中@2x.png'
					}
				})

			},
			async getData() {
				// await getAllRoles().then(res => {
				// 	console.log(res.data)
				// })

				let that = this;
				await getAllDevices({
					data: {
						userid: config.userid
					}
				}).then(res => {
					console.log('res', res.data)

					this.deviceList = []
					if (res.data.statuscode == 1) {
						res.data.data.forEach((item, index) => {
							this.deviceList.push({
								img: config.domain + "images/" + item["image"],
								name: item["devicename"],
								workshopid: item["workshopid"],
								"ultilityrate": "0%",
								"status": "关机"
							})
						});


					} else {
						console.log('Error:getAllDevices failed');
					}
				});
				let days = this.getStartAndEndOfDay()

				await MeasureResult({
					data: {
						starttime: days.startString,
						endtime: days.endString,
						workshopid: config.workshopid
					}
				}).then(res => {
					if (res.data.statuscode == 1) {
						that.tableData = res.data.data

					} else {
						console.log('Error:MeasureResult failed');
					}

				});

			},
			getStartAndEndOfDay() {
				// 获取当前日期和时间  
				const now = new Date();

				// 获取当日的开始时间（00:00:00）  
				const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);

				// 获取当日的结束时间（23:59:59）  
				const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0, -1);

				// 格式化日期为 YYYY-MM-DD HH:mm:ss 字符串  
				const formatDate = (date) => {
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1  
					const day = String(date.getDate()).padStart(2, '0');
					const hours = String(date.getHours()).padStart(2, '0');
					const minutes = String(date.getMinutes()).padStart(2, '0');
					const seconds = String(date.getSeconds()).padStart(2, '0');
					return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				};

				// 获取格式化后的字符串  
				const startString = formatDate(startOfDay);
				const endString = formatDate(endOfDay);

				return {
					startString,
					endString
				};
			},
			getStartAndEndOfspecificDay(now) {
				// 获取当前日期和时间  

				// 获取当日的开始时间（00:00:00）  
				const startOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0);

				// 获取当日的结束时间（23:59:59）  
				const endOfDay = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0, -1);

				// 格式化日期为 YYYY-MM-DD HH:mm:ss 字符串  
				const formatDate = (date) => {
					const year = date.getFullYear();
					const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要加1  
					const day = String(date.getDate()).padStart(2, '0');
					const hours = String(date.getHours()).padStart(2, '0');
					const minutes = String(date.getMinutes()).padStart(2, '0');
					const seconds = String(date.getSeconds()).padStart(2, '0');
					return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
				};

				// 获取格式化后的字符串  
				const startString = formatDate(startOfDay);
				const endString = formatDate(endOfDay);

				return {
					startString,
					endString
				};
			},

			async search() {
				if (config.rolename === "普通用户" || config.rolename === "中级管理员") {
					return;
				}

				console.log(this.formInline)
				if (this.formInline.date == "") {
					uni.showToast({
						title: '选择日期'
					});
					return
				}
				let days = this.getStartAndEndOfspecificDay(this.formInline.date)
				let partid = this.formInline.partid
				let parttypeid = this.formInline.parttypeid
				this.tableData = [];

				await SearchReport({
					data: {
						starttime: days.startString,
						endtime: days.endString,
						workshopid: config.workshopid,
						workpieceid: partid,
						workpiecetypeid: parttypeid
					}
				}).then(res => {
					if (res.data.statuscode == 1) {

						this.tableData = res.data.data

					} else {
						console.log('Error:MeasureResult failed');
					}

				});
			},
			stopInterval() {
				// 清除定时器  
				if (this.intervalId !== null) {
					clearInterval(this.intervalId);
					this.intervalId = null;
				}
			},
			async handleRowClick(row) {
				this.infoShow = true
				const WorkpieceID = row.WorkpieceID
				//弹出详情显示
				await MeasureResultDetail({
					data: {
						workpieceid: WorkpieceID
					}
				}).then(res => {
					if (res.data.statuscode == 1) {
						console.log("%%%%%%%%%%%%%", res.data.data)
						this.dataList = res.data.data
					} else {
						console.log('Error:MeasureResult failed');
					}

				});

			},
			gohome() {
				this.showPage = "MainPage"
			}
		},
		onUnload() {
			// 在页面卸载时停止循环执行函数  
			this.stopInterval();
		}
	}
</script>

<style scoped>
	.def-text {
		width: 50%;
		position: relative;
		z-index: 1;
		font-family: SourceHanSansSC-Regular;
		font-size: 16px;
		color: #FFFFFF;
		letter-spacing: 0;
		line-height: 22.4px;
		font-weight: 400;
		white-space: nowrap;
		/* 禁止换行 */
		overflow: hidden;
		/* 隐藏超出内容 */
		text-overflow: ellipsis;
		/* 显示省略号 */
	}
	
	.def-text-2 {
		position: relative;
		z-index: 1;
		font-family: SourceHanSansSC-Regular;
		font-size: 16px;
		color: #FFFFFF;
		letter-spacing: 0;
		line-height: 22.4px;
		font-weight: 400;
	}

	.add-btn {
		background: #030A28;
		background-image: linear-gradient(180deg, rgba(72, 156, 255, 0.13) 0%, rgba(43, 186, 255, 0.18) 49%, rgba(0, 138, 255, 0.50) 100%);
		box-shadow: inset 0 0 11px 0 #05DCF8;
		width: 7.9vw;
		height: 3.3vh;
		border-radius: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 2vh;
		margin-left: 2vh;
	}

	/deep/.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
		background-color: transparent !important;
	}

	page {
		background-color: #030a28;
		color: #ffffff;
		text-align: center;
		width: 100%;
		height: 100%;
	}

	.home-box {
		background-image: url('../../static/imgPc/主页背景@2x.png');
		background-size: 100% 100%;
		position: relative;
		width: 100%;
		height: 100%;
	}

	.child-img {
		display: block;
		width: 100%;
		height: 100vh;
		background-size: 100% 100%;
	}

	/* 标题样式 */
	.content-box {
		top: 10%;
		position: absolute;
		width: 100%;
	}

	.title {
		top: 5%;
		left: 50%;
		/* 可根据需要调整 */
		transform: translate(-50%, -50%);
		/* 水平和垂直居中 */
		font-size: 26px;
		font-weight: 500;
		letter-spacing: 3px;
		position: absolute;
		color: white;
		/* 文字颜色，可以根据背景调整 */
		padding: 10px;
		text-align: center;
	}

	.charts-box {
		width: 100%;
		height: 100%;
		padding: 50px 20px 15px 20px;
	}

	.map-box {
		padding: 20rpx 60rpx 20rpx 60rpx;

	}

	.button {
		height: 40px;
		width: 120px;
	}

	.image-container {
		position: relative;
		overflow: hidden;
	}

	.centered-text {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		text-align: center;
		z-index: 2;
		width: 100%;
	}

	.product-box {
		background-image: url('../../static/imgPc/设备列表模块 背景@2x.png');
		background-size: 100% 100%;
		margin-top: 20rpx;
		padding-top: 12px;
		padding-bottom: 10px;
	}
	.product-box-inner{
		height: 800rpx;
		overflow-y: auto;
		margin-right: 10px;
	}

	.chart-map {
		background-image: url('../../static/imgPc/稼动率板块 背景@2x.png');
		background-size: 100% 100%;
		height: 800rpx;
		overflow: hidden;
		margin-top: 20rpx;
	}

	.product-state {
		font-size: 24rpx;
		position: absolute;
		top: 48%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		padding: 20rpx;
		text-align: center;
		z-index: 2;
		font-family: SourceHanSansSC-Regular;
		font-size: 16px;
		color: #FFFFFF;
		letter-spacing: 0;
		line-height: 22.4px;
		font-weight: 400;
	}

	.device-info {
		font-size: 28rpx;
		text-align: left;
		margin-left: 50rpx;
		margin-top: 15%;
		position: relative;
	}

	.table-box {
		background-image: url('../../static/imgPc/底部模块 背景@2x.png');
		background-size: 100% 100%;
		height: 800rpx;
	}

	.table-label {
		font-size: 20px;
		top: 5%;
		;
		position: relative;
		left: 15%;
		text-align: left;
	}

	/deep/.el-input__inner {
		background-color: #004289 !important;
		border: 1px solid #004289;
		color: #FFFFFF;
		font-family: SourceHanSansSC-Regular;
		font-size: 16px;
		letter-spacing: 0;
		line-height: 22.4px;
		font-weight: 400;
	}

	/deep/.el-form-item__label {
		color: white;
	}

	/deep/.el-form-item__content {
		line-height: 0rpx;
	}

	/deep/.el-form-item__label {
		/* line-height: 60rpx;
		font-size: 24rpx; */
		font-family: SourceHanSansSC-Regular;
		font-size: 16px;
		color: #FFFFFF;
		letter-spacing: 0;
		line-height: 22.4px;
		font-weight: 400;
	}

	/deep/.el-table,
	.el-table__expanded-cell {
		background-color: transparent;
		color: white;
	}

	/deep/.el-table th {
		background-color: #061d48 !important;
		color: white;
		text-align: center !important;
		margin-bottom: 40rpx !important;
		font-size: 24rpx;
		font-weight: 300;
	}

	/deep/.el-table tr {
		background-color: #091b3a;
		font-size: 24rpx;
	}

	/deep/.el-table td.el-table__cell,
	.el-table th.el-table__cell.is-leaf {
		border-bottom: 4px solid #011636 !important;
		font-family: SourceHanSansSC-Regular;
		font-size: 16px;
		color: #FFFFFF;
		letter-spacing: 0;
		line-height: 22.4px;
		font-weight: 400;
	}

	/deep/.el-table--border::after,
	.el-table--group::after,
	.el-table::before {
		background-color: transparent;
	}

	/deep/.el-table thead tr th {
		border-bottom: 1px solid transparent !important;
		font-family: SourceHanSansSC-Regular;
		font-size: 16px;
		color: #FFFFFF;
		letter-spacing: 0;
		line-height: 22.4px;
		font-weight: 400;
	}
</style>